<!--
 * @Author: Chuckie
 * @Email: chuckie@aliyun.com
 * @Date: 2022-11-10 14:35:49
 * @LastEditTime: 2022-11-12 14:32:09
 * @Description: 
 * @FilePath: /zl-web/src/views/basic/enterprise/detail.vue
 *  
-->
<template>
  <div class="app-container">

    <el-form :model="state.form" label-width="120px">
      <el-form-item>
        <el-button type="primary" @click="onSubmit">{{$t('common.button.save')}}</el-button>
        <el-button @click="onCancel">{{$t('common.button.back')}}</el-button>
      </el-form-item>
      <el-tree ref="treeRef" :data="state.treeData" show-checkbox default-expand-all node-key="id" highlight-current
        :props="state.defaultProps" />

    </el-form>
  </div>
</template>

<script setup lang="ts">
import { create} from './api/base-user'
import { selectPolicyTree, selectPolicyTreeByRoleId, addPolicyByRoleId } from './api/base-policy'
import { ElTree, ElForm, ElFormItem, ElButton } from 'element-plus';
const route = useRoute()
const router = useRouter()

const treeRef = ref<InstanceType<typeof ElTree>>()
const { proxy }: any = getCurrentInstance()
const state = reactive({
  form: {
    id: "",
    username: "",
    email: "",
    phone: "",
    sex: "",
    age: "",
    status: "",
    createBy: "",
    modifyBy: "",
    gmtCreate: "",
    gmtModify: "",
    lastLoginTime: "",
    nickname: "",
  },
  dictRole: {},
  checkedRole: {},
  treeData: {},
  defaultProps: {
    children: 'children',
    label: 'name',
  },
  checkedNodeIds: <any>[]
})

const onCancel = () => {
  router.back()
}

const onSubmit = async () => {
  if (route.params.id) {
    const permissionIds = <any>[]
    treeRef.value?.getCheckedKeys().forEach(ele => permissionIds.push(ele))
    treeRef.value?.getHalfCheckedKeys().forEach(ele => permissionIds.push(ele))
    const para = {
      permissionIds: permissionIds,
      roleId: route.params.id
    }
    const data = await addPolicyByRoleId(para)
    proxy.$message({ message: proxy.$t('common.message.editSuccessfully'), type: 'success' })
  } else {
    const data = await create(state.form)
    proxy.$message({ message: proxy.$t('common.message.saveSuccessfully'), type: 'success' })
    state.form.id = "";
    state.form.username = "";
    state.form.email = "";
    state.form.phone = "";
    state.form.sex = "";
    state.form.age = "";
    state.form.status = "";
    state.form.createBy = "";
    state.form.modifyBy = "";
    state.form.gmtCreate = "";
    state.form.gmtModify = "";
    state.form.lastLoginTime = "";
    state.form.nickname = "";
  }
}


 
const onSelectPolicyTreeByRoleId = async (roleId: string | string[]) => {
  const data = await selectPolicyTreeByRoleId(roleId)
  state.treeData = data.data
  getLeafIds( data.data)
  treeRef.value?.setCheckedKeys(state.checkedNodeIds)
}
const getLeafIds = (data: Array<any>) => {
  data.forEach(item => {
    if (item.children && item.children.length>0) {
      getLeafIds(item.children)
    } else {
      if(item.haveFlag){
        state.checkedNodeIds.push(item.id)
      }
    }

  })

}





onMounted(() => {
  // route.params.id && !Array.isArray(route.params.id) && onSelectOne(route.params.id)
  // onSelectPolicyTree()
  onSelectPolicyTreeByRoleId(route.params.id)
})

</script>

<style lang="scss" scoped>
.el-input {
  width: 300px;
}

.el-select {
  width: 300px;
}

.el-textarea {
  width: 300px;
}
</style>
